<template>


	<!--汇总-->
	<a-row :gutter="12">
		<!--资产-->
		<a-col :span="12">
			<a-card :bordered="false" class="card-text-center">
				<div class="card-text-top">资产</div>
				<a-divider class="cardhr"></a-divider> <!-- 添加分割线 -->
				<a-row :gutter="12">
					<a-col :span="8">
						<div class="card-text-center">
							<p>销售金额</p>
							<a-statistic :value="totalObj.salesMoney" precision="2" />
						</div>
					</a-col>
					<a-col :span="8">
						<div class="card-text-center">
							<p>采购金额</p>
							<a-statistic :value="totalObj.purchaseMoney" precision="2" />
						</div>
					</a-col>
					<a-col :span="8">
						<div class="card-text-center">
							<p>库存成本</p>
							<a-statistic :value="totalObj.inventoryMoney" precision="2" />
						</div>
					</a-col>
				</a-row>
			</a-card>
		</a-col>
		<!--客户-->
		<a-col :span="6">
			<a-card :bordered="false" class="card-text-center">
				<div class="card-text-top">客户</div>
				<a-divider class="cardhr"></a-divider>
				<a-row :gutter="12">
					<a-col :span="6">
						<div class="card-text-center">
							<p>今日+</p>
							<a-statistic :value="client.todayCount" precision="2" />
						</div>
					</a-col>
					<a-col :span="6">
						<div class="card-text-center">
							<p>本周+</p>
							<a-statistic :value="client.weekCount" precision="2" />
						</div>
					</a-col>
					<a-col :span="6">
						<div class="card-text-center">
							<p>本月+</p>
							<a-statistic :value="client.monthCount" precision="2" />
						</div>
					</a-col>
					<a-col :span="6">
						<div class="card-text-center">
							<p>数量</p>
							<a-statistic :value=client.totalCount precision="2" />
						</div>
					</a-col>
				</a-row>
			</a-card>
		</a-col>
		<!--供应商-->
		<a-col :span="6">
			<a-card :bordered="false" class="card-text-center">
				<div class="card-text-top">供应商 </div>
				<a-divider class="cardhr"></a-divider>
				<a-row :gutter="12">
					<a-col :span="6">
						<div class="card-text-center">
							<p>今日+</p>
							<a-statistic :value="supplier.todayCount" precision="2" />
						</div>
					</a-col>
					<a-col :span="6">
						<div class="card-text-center">
							<p>本周+</p>
							<a-statistic :value="supplier.weekCount" precision="2" />
						</div>
					</a-col>
					<a-col :span="6">
						<div class="card-text-center">
							<p>本月+</p>
							<a-statistic :value="supplier.monthCount" precision="2" />
						</div>
					</a-col>
					<a-col :span="6">
						<div class="card-text-center">
							<p>数量</p>
							<a-statistic :value=supplier.totalCount precision="2" />
						</div>
					</a-col>
				</a-row>
			</a-card>
		</a-col>
	</a-row>


	<div class="card-margin10"></div>
	<!--采购-->
	<a-row :gutter="12">
		<a-col :span="12">
			<a-card :bordered="false" class="card-text-center">
				<div class="card-text-top">采购</div>
				<a-divider class="cardhr"></a-divider>
				<a-row :gutter="12">
					<a-col :span="6">
						<div class="card-text-center">
							<p>今日订单数量</p>
							<a-statistic :value="purchaseInfo.todayCount" precision="2" />
							<span class="card-content-bottom">本周：{{ purchaseInfo.weekCount }} </span>
							<span class="card-content-bottom">本月：{{ purchaseInfo.monthCount }}</span>
						</div>
					</a-col>
					<a-col :span="6">
						<div class="card-text-center">
							<p>今日订单金额</p>
							<a-statistic :value="purchaseInfo.todayAmount" precision="2" />
							<span class="card-content-bottom">本周：{{ purchaseInfo.weekAmount }}&nbsp; </span>
							<span class="card-content-bottom">本月：{{ purchaseInfo.monthAmount }}</span>
						</div>
					</a-col>
					<a-col :span="6">
						<div class="card-text-center">
							<p>今日入库数量</p>
							<a-statistic :value="purchaseInfo.todayCountBill" precision="2" />
							<span class="card-content-bottom">本周：{{ purchaseInfo.weekCountBill }}&nbsp; </span>
							<span class="card-content-bottom">本月：{{ purchaseInfo.monthCountBill }}</span>
						</div>
					</a-col>
					<a-col :span="6">
						<div class="card-text-center">
							<p>今日入库金额</p>
							<a-statistic :value="purchaseInfo.todayAmountBill" precision="2" />
							<span class="card-content-bottom">本周：{{ purchaseInfo.weekAmountBill }}&nbsp; </span>
							<span class="card-content-bottom">本月：{{ purchaseInfo.monthAmountBill }}</span>
						</div>
					</a-col>
				</a-row>
			</a-card>
		</a-col>
		<!--销售-->
		<a-col :span="12">
			<a-card :bordered="false" class="card-text-center">
				<div class="card-text-top">销售</div>
				<a-divider class="cardhr"></a-divider>
				<a-row :gutter="12">
					<a-col :span="6">
						<div class="card-text-center">
							<p>今日订单数量</p>
							<a-statistic :value="salesInfo.todayCount" precision="2" />
							<span class="card-content-bottom">本周：{{ salesInfo.weekCount }}&nbsp; </span>
							<span class="card-content-bottom">本月：{{ salesInfo.monthCount }}</span>
						</div>
					</a-col>
					<a-col :span="6">
						<div class="card-text-center">
							<p>今日订单金额</p>
							<a-statistic :value="salesInfo.todayAmount" precision="2" />
							<span class="card-content-bottom">本周：{{ salesInfo.weekAmount }}&nbsp;</span>
							<span class="card-content-bottom">本月：{{ salesInfo.monthAmount }}</span>
						</div>
					</a-col>
					<a-col :span="6">
						<div class="card-text-center">
							<p>今日出库数量</p>
							<a-statistic :value="salesInfo.todayCountBill" precision="2" />
							<span class="card-content-bottom">本周：{{ salesInfo.weekCountBill }}&nbsp; </span>
							<span class="card-content-bottom">本月：{{ salesInfo.monthCountBill }}</span>
						</div>
					</a-col>
					<a-col :span="6">
						<div class="card-text-center">
							<p>今日出库金额</p>
							<a-statistic :value="salesInfo.todayAmountBill" precision="2" />
							<span class="card-content-bottom">本周：{{ salesInfo.weekAmountBill }}&nbsp; </span>
							<span class="card-content-bottom">本月：{{ salesInfo.monthAmountBill }}</span>
						</div>
					</a-col>
				</a-row>
			</a-card>
		</a-col>
		<div class="card-margin10"></div>

	</a-row>


	<div class="card-margin10"></div>
	<a-row :gutter="12">
		<!-- 采购统计图 -->
		<a-col :span="12">
			<a-card :bordered="false" class="card-text-center">
				<a-row :gutter="12">
					<div id="PurchaseChart" class="chart"></div>
				</a-row>
			</a-card>
		</a-col>

		<!-- 销售统计图 -->
		<a-col :span="12">
			<a-card :bordered="false" class="card-text-center">
				<a-row :gutter="12">
					<div id="SalesChart" class="chart"></div>
				</a-row>
			</a-card>
		</a-col>
	</a-row>
</template>
<script setup>

import { onMounted } from 'vue'
import * as echarts from 'echarts'
import imsIndex from "@/api/ims/imsIndex";

const client = ref({
	monthCount: 0,
	todayCount: 0,
	totalCount: 0,
	weekCount: 0
})
const purchaseInfo = ref({
	monthAmount: 0,
	monthAmountBill: 0,
	monthCount: 0,
	monthCountBill: 0,
	todayAmount: 0,
	todayAmountBill: 0,
	todayCount: 0,
	todayCountBill: 0,
	weekAmount: 0,
	weekAmountBill: 0,
	weekCount: 0,
	weekCountBill: 0,
})
const purchaseStatistics = ref({
	x: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
	y: [],
})
const salesInfo = ref({
	monthAmount: 0,
	monthAmountBill: 0,
	monthCount: 0,
	monthCountBill: 0,
	todayAmount: 0,
	todayAmountBill: 0,
	todayCount: 0,
	todayCountBill: 0,
	weekAmount: 0,
	weekAmountBill: 0,
	weekCount: 0,
	weekCountBill: 0,
})
const salesStatistics = ref({
	x: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
	y: [],
	profitY: []
})
const supplier = ref({
	monthCount: 0,
	todayCount: 0,
	totalCount: 0,
	weekCount: 0
})
const totalObj = ref({
	inventoryMoney: 0,
	purchaseMoney: 0,
	salesMoney: 0,
})

const timer = ref(null)

onMounted(() => {
	statistics()
	// timer.value = setInterval(() => {
		console.log('动态刷新首页数据：')
		// statistics()
	// },5000)


});

const statistics = () => {
	imsIndex.getStatistics().then(res => {
		console.log('获取统计信息：', res)
		client.value = res.client
		purchaseInfo.value = res.purchaseInfo
		purchaseStatistics.value = res.purchaseStatistics
		salesInfo.value = res.salesInfo
		salesStatistics.value = res.salesStatistics
		supplier.value = res.supplier
		totalObj.value.inventoryMoney = res.inventoryMoney
		totalObj.value.purchaseMoney = res.purchaseMoney
		totalObj.value.salesMoney = res.salesMoney



		// 初始化采购统计图
		let purchaseChart = echarts.init(document.getElementById('PurchaseChart'));
		const purchaseOption = {
			title: {
				text: '采购金额',
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow' // 设置为 'shadow' 以便显示阴影指示器
				}
			},
			xAxis: {
				type: 'category',
				data: purchaseStatistics.value.x,
			},
			yAxis: {
				type: 'value',
			},
			series: [
				{
					data: purchaseStatistics.value.y,
					type: 'bar',
					itemStyle: {
						color: '#1677FF'
					}
				},
			],
		};
		purchaseChart.setOption(purchaseOption);

		// 初始化销售统计图
		let salesChart = echarts.init(document.getElementById('SalesChart'));
		const salesOption = {
			title: {
				text: '销售金额',
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow' // 设置为 'shadow' 以便显示阴影指示器
				}
			},
			legend: {
				// TODO 毛利润暂时不做
				// data: ['销售金额', '毛利润']
				data: ['销售金额']
			},
			xAxis: {
				type: 'category',
				data: salesStatistics.value.x,
			},
			yAxis: {
				type: 'value',
			},
			series: [
				{
					name: '销售金额',
					data: salesStatistics.value.y,
					type: 'bar', // 将销售金额设置为柱状图
					itemStyle: {
						color: '#1677FF' // 销售金额的颜色
					}
				},
				{
					name: '毛利润',
					data: salesStatistics.value.profitY,
					type: 'bar', // 将毛利润也设置为柱状图
					itemStyle: {
						color: '#FF5722' // 毛利润的颜色
					}
				},
			],
		};

		// 设置图表选项
		salesChart.setOption(salesOption);


		// 设置图表选项
		salesChart.setOption(salesOption);

		// 窗口大小变化时自适应
		window.onresize = () => {
			purchaseChart.resize();
			salesChart.resize();
		};
	})
}

onUnmounted(() => {
	if (timer.value) {
		clearInterval(timer.value);
	}
});
</script>

<style>
.cardhr {
	margin: 12px 0;
}

.card-text-center {
	text-align: center;
}

.card-text-top {
	text-align: left;
	font-size: 16px;
}

.card-margin10 {
	margin-top: 10px;
}

.chart {
	width: 100%;
	height: 300px;
}

.card-content-bottom {
	color: #595959;
	font-size: 12px;
}
</style>
